<template>
	<view class="goods_item">
		<navigator :url="`/pages_goods/detail-page/detail-page?id=${item.id}`">
			<image :src="item.image" mode=""></image>
			<view class="goods_de">
				<text class="goods_title">{{item.commodityName}}</text>
				<view class="price">
					<view class="current_price">
						￥{{item.list[0]?item.list[0].specificationPrice.toFixed(2):''}}
					</view>
					<view class="original_price">
						￥{{item.list[0]?item.list[0].priceOriginally.toFixed(2):''}}
					</view>
				</view>
			</view>
		</navigator>
		<!-- 		<view class="buy" @click="buyGoods">
			<button>购买</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "goods-cover",
		data() {
			return {

			};
		},
		props: ['item'],
		created() {
			// console.log(this.item);
		},
		methods: {
			buyGoods() {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: `/pages_mine/pages/order-form/order-form?id=${this.item.id}&number=${1}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods_item {
		border-radius: 10rpx;
		background-color: #fff;
		width: 340rpx;
		position: relative;
		padding-bottom: 16rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		image {
			width: 340rpx;
			// display: block;
			height: 340rpx;
		}

		.goods_title {
			font-size: 26rpx;
			line-height: 30rpx;
			display: block;
			margin-bottom: 36rpx;
		}

		.goods_de {
			padding: 0 10rpx;
		}

		.price {
			display: flex;
			align-items: flex-start;

			.current_price {
				color: #FF594D;
				font-size: 32rpx;
			}

			.original_price {
				color: #D4D4D4;
				font-size: 24rpx;
				line-height: 40rpx;
				text-decoration: line-through;
			}
		}

		.buy {
			button {
				border-radius: 444rpx;
				height: 44rpx;
				width: 120rpx;
				color: #FF594D;
				font-size: 20rpx;
				padding: 0;
				line-height: 44rpx;
				border: 2rpx solid #FF594D;
				position: absolute;
				right: 10rpx;
				bottom: 16rpx;
			}
		}
	}
</style>